const path = require('path')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    mode:'development',
    devtool:'cheap-module-eval-source-map',
    devServer:{

        // 更改静态文件目录位置
        contentBase:path.resolve(__dirname,'../dist'),
        compress:true, // 开启gzip
        historyApiFallback: true,
        hot: true,
        quiet: true,
		port:9000,
    },

    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|svg|ico|hdr)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash].[ext]',
                    outputPath: 'assets/images',
                    esModule: false,
                }
            },
            {
                test: /\.(eot|woff|woff2|ttf)(\?\S*)?$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'assets/font',
                    esModule: false
                }
            },
            {
                type: 'javascript/auto',
                test: /\.(json)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[hash].[ext]',
                        outputPath: 'assets/files',
                        esModule: false,
                    },
                }]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            // ['@babel/preset-env', { targets: "defaults" }]
                            ['@babel/preset-env', { targets: "defaults" }]
                        ],
                        plugins: ["@babel/plugin-transform-modules-commonjs",'@babel/plugin-proposal-class-properties','@babel/plugin-transform-runtime']
                    }
                }
            },
            {
                test: /\.css$/,

                use: [
                    // “抽离css到单独的文件”
                    MiniCssExtractPlugin.loader,
                    // ss-loader 解析 @import 和 url() ，然后 import/require() 加载
                    'css-loader',
                    // css 不同浏览器兼容
                    'postcss-loader',
                ]
            },
        ]
    }

}
